<template>
  <div class="box-border">
    <div class="title-cost">成本统计汇总</div>
    <div class="display-flex align-items-center justify-content-flex-justify">
      <div class="display-flex align-items-center">
        <div>
          <el-image
            style="width: 40px; height: 40px; margin-right: 10px"
            :src="cost"
            fit="cover"
          ></el-image>
        </div>
        <div>
          <div class="font-weight">总成本</div>
          <div>{{ details.totalCost }}元</div>
        </div>
      </div>
      <div class="display-flex align-items-center">
        <div>
          <el-image
            style="width: 40px; height: 40px; margin-right: 10px"
            :src="time"
            fit="fill"
          ></el-image>
        </div>
        <div>
          <div class="font-weight">加工时长</div>
          <div>{{ formatSeconds(details.processingTime) }}</div>
        </div>
      </div>
      <div class="display-flex align-items-center">
        <div>
          <el-image
            style="width: 40px; height: 40px; margin-right: 10px"
            :src="Average"
            fit="fill"
          ></el-image>
        </div>
        <div>
          <div class="font-weight">平均成本</div>
          <div>{{ details.averageCost }}元/小时</div>
        </div>
      </div>
    </div>
    <!-- <hr style='background-color:#eee; height:10px; border:none;'>
    <div class="display-flex align-items-center justify-content-flex-justify">
        <div>材料成本：<span class="color-red">{{details.materialCost}}</span>元</div>
        <div>气体成本：<span class="color-red">{{details.gasCost}}</span>元</div>
        <div>用电成本：<span class="color-red">{{details.electricCost}}</span>元</div>
        <div>其他成本：<span class="color-red">{{details.otherConsumableCost}}</span>元</div>
    </div> -->
  </div>
</template>

<script>
import cost from "@/assets/images/cost-o.png";
import Average from "@/assets/images/Average.png";
import time from "@/assets/images/time.png";
import { formatSeconds } from "@/utils/index";
import { getTechnologyWorkingPrimeCost } from "@/api/technology/cost";
export default {
  data() {
    return {
      cost: cost,
      Average: Average,
      time: time,
      workingId: null,
      details: {},
    };
  },
  methods: {
    formatSeconds: formatSeconds,
    getInfo(workingId) {
      this.workingId = workingId;
      getTechnologyWorkingPrimeCost({ workingId: workingId }).then((res) => {
        this.details = res.data;
      });
    },
    setDetails(totalCost) {
      this.details.totalCost = totalCost;
      // 成本/ (时间秒/3600这里先保留2位)=平均成本（保留2位）
      let time = this.accDiv(this.details.processingTime, 3600).toFixed(2);
      this.details.averageCost = this.accDiv(totalCost, time).toFixed(2);
    },
    accMul(value1, value2) {
      if (value1 == 0 || value2 == 0) {
        return 0;
      }

      let m = 0;

      let v1 = value1.toString();

      let v2 = value2.toString();

      m += v1.split(".")[1] ? v1.split(".")[1].length : 0;

      m += v2.split(".")[1] ? v2.split(".")[1].length : 0;

      let _v1 = Number(v1.replace(".", ""));

      let _v2 = Number(v2.replace(".", ""));

      return (_v1 * _v2) / Math.pow(10, m);
    },
    // 处理除法丢失精度
    accDiv(value1, value2) {
      if (value1 == 0) {
        return 0;
      }

      let v1 = value1.toString();

      let v2 = value2.toString();

      let m1 = v1.split(".")[1] ? v1.split(".")[1].length : 0;

      let m2 = v2.split(".")[1] ? v2.split(".")[1].length : 0;

      let _v1 = Number(v1.replace(".", ""));

      let _v2 = Number(v2.replace(".", ""));

      return this.accMul(_v1 / _v2, Math.pow(10, m2 - m1));
    },
  },
};
</script>

<style lang="scss" scoped>
.color-red {
  color: red;
}
.box-border {
  border: 1px solid #eee;
  padding: 8px 15px;
}
.title-cost {
  font-weight: bold;
  line-height: 35px;
}
.font-weight {
  line-height: 26px;
}
</style>

